<template lang="pug">
.role-manage.app-container
  .container-operation
    el-button(type="primary" size="small" icon='el-icon-plus' @click="addShow = true") 添加

  .table-main
    el-table(:data="state.listData" v-loading="tableLoading" border)
      el-table-column(label="序号" prop="id" align="center" width="70")
      el-table-column(label="角色名" prop="roleName" align="center" min-width="120")
      el-table-column(label="操作" width="250")
        template(#default="scope")
          el-button(size="mini" type="primary" @click="handleEdit(scope.row)") 编辑
          el-button(size="mini" type="warning" @click="handlePower(scope.row)") 权限设置
          el-button(size="mini" type="danger" @click="handleDel(scope.row)" v-if="scope.row.id !== 1") 删除

  roleManageAdd(v-model:isDialog="addShow" @closeFun="handleColse")
  roleManageEdit(v-model:isDialog="editShow" v-model:dialogRecord="state.defaultData" @closeFun="handleColse")
  roleManagePower(v-model:isDialog="powerShow" v-model:dialogRecord="state.defaultData" @closeFun="handleColse")
</template>

<script setup>
import roleManageAdd from './roleManageAdd.vue'
import roleManageEdit from './roleManageEdit.vue'
import roleManagePower from './roleManagePower.vue'

import { getRole } from '../../api/user'

import { ref, reactive, toRefs, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

// 数据
const state = reactive({
  listData: [], // 列表数据
  defaultData: {}
})
const total = ref(60)
const tableLoading = ref(false)
const addShow = ref(false)
const editShow = ref(false)
const powerShow = ref(false)

getList()

// 获取列表
async function getList () {
  // tableLoading.value = true
  // const getData = await getRole(state.pageData)

  state.listData = [
    { id: 1, roleName: '角色名1' },
    { id: 2, roleName: '角色名2' },
    { id: 3, roleName: '角色名3' },
    { id: 4, roleName: '角色名4' },
    { id: 5, roleName: '角色名5' },
    { id: 6, roleName: '角色名6' }
  ]
}

// 编辑
function handleEdit (row) {
  state.defaultData = row
  editShow.value = true
}

// 权限设置
function handlePower (row) {
  state.defaultData = row
  powerShow.value = true
}

// 删除列表
function handleDel (row) {
  proxy.$confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    proxy.$message({ type: 'success', message: '删除成功' })
  }).catch(() => {
    proxy.$message({ type: 'warning', message: '已取消删除' })
  })
}

// 关闭弹窗
function handleColse (val) {
  console.log('close')
}
</script>

<style lang="scss">
</style>
